<template>
	<view class="main">
		<view class="btn_box">
			<navigator url="allBrand">全部品牌</navigator>
		</view>
		<view class="brand_list">
			<view class="brand_item">
				<!-- <view class="tittle">
					<text >肉类</text>
					<navigator url="classify">更多</navigator>
				</view> -->
				<view class="goods-list">
					
					<view 
						v-for="(item, index) in goodsList" :key="index"
						class="goods-item"
						@click="navToDetailPage(item.oProductClass_id)"
					>
						<view class="image-wrapper">
							<image :src="item.defaultAlbum" mode="aspectFill"></image>
						</view>
						<text class="title clamp">{{item.pName}}</text>
						
					</view>
				</view>
				<uni-load-more :status="loadingType"></uni-load-more>
				
			</view>
		</view>
	</view>
	
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import listOther from '@/components/list/listOther.vue';
	export default {
		components: {
			uniLoadMore,
				listOther,
		},
		data() {
			return {
				cateMaskState: 0, //分类面板展开状态
				headerPosition:"fixed",
				headerTop:"0px",
				loadingType: 'more', //加载更多状态
				filterIndex: 0, 
				cateId: 0, //已选三级分类id
				priceOrder: 0, //1 价格从低到高 2价格从高到低
				cateList: [],
				goodsList: []
			};
		},
		
		onLoad(options){
			// #ifdef H5
			this.headerTop = document.getElementsByTagName('uni-page-head')[0].offsetHeight+'px';
			// #endif
			this.cateId = options.tid;
			this.loadCateList(options.fid,options.sid);
			this.loadData();
			
			
			this.$Request.post4(
				this.$api.httpApi.brand.brand, {
					brand_id:options.brand_id
				}
			).then(res => {
				if (res.code == 1) {
					console.log(res.data[0].name)
					// this.goodsList = res.data
			
				}
			})
			this.getlist(options.brand_id)
			
		},
		onPageScroll(e){
			//兼容iOS端下拉时顶部漂移
			if(e.scrollTop>=0){
				this.headerPosition = "fixed";
			}else{
				this.headerPosition = "absolute";
			}
		},
		//下拉刷新
		onPullDownRefresh(){
			this.loadData('refresh');
		},
		//加载更多
		onReachBottom(){
			this.loadData();
		},
		
		methods: {
			getlist(brand_id){
				let that = this;
				that.$Request.post(
					that.$api.httpApi.search.search+"&token="+this.$SysCache.get('token'), {
						queryCondition: {
							order: [{
								fieldname: "iOrder",
								direction: "asc"
							}],
							pageindex: 1,
							pagesize: 12,
							where: [{
								fieldname: "brand_id",
								valuefrom: brand_id
							}]
						}
					}
				).then(res => {
					if (res.code == 200) {
						console.log(res.data.data)
				         that.goodsList = res.data.data
					}
				})
				
			},
			
			
			//加载分类
			async loadCateList(fid, sid){
				// let list = await this.$api.json('cateList');
				let cateList = list.filter(item=>item.pid == fid);
				
				cateList.forEach(item=>{
					let tempList = list.filter(val=>val.pid == item.id);
					item.child = tempList;
				})
				this.cateList = cateList;
			},
			//加载商品 ，带下拉刷新和上滑加载
			async loadData(type='add', loading) {
				//没有更多直接返回
				if(type === 'add'){
					if(this.loadingType === 'nomore'){
						return;
					}
					this.loadingType = 'loading';
				}else{
					this.loadingType = 'more'
				}
				
				// let goodsList = await this.$api.json('goodsList');
				if(type === 'refresh'){
					this.goodsList = [];
				}
				//筛选，测试数据直接前端筛选了
				if(this.filterIndex === 1){
					goodsList.sort((a,b)=>b.sales - a.sales)
				}
				if(this.filterIndex === 2){
					goodsList.sort((a,b)=>{
						if(this.priceOrder == 1){
							return a.price - b.price;
						}
						return b.price - a.price;
					})
				}
				
				// this.goodsList = this.goodsList.concat(goodsList);
				
				//判断是否还有下一页，有是more  没有是nomore(测试数据判断大于20就没有了)
				this.loadingType  = this.goodsList.length > 20 ? 'nomore' : 'more';
				if(type === 'refresh'){
					if(loading == 1){
						uni.hideLoading()
					}else{
						uni.stopPullDownRefresh();
					}
				}
			},
			
			
			//详情
			navToDetailPage(id){
				//测试数据没有写id，用title代替
				
				uni.navigateTo({
					url: `/pages/cate/cateList?categoryid=${id}`
				})
			},
			stopPrevent(){}
		},
	}
</script>

<style lang='scss'>
	page{background: #E9E9E9;}
	.btn_box{
		padding: 40upx 0;
		text-align: center;
		background: #fff;
	}
	.btn_box navigator{
		width: 60%;
		margin: 0 auto;
		color: #fff;
		background: #F0406F;
		font-size: 28upx;
		height: 60upx;
		line-height: 60upx;
	}
	.tittle{
		width: 100%;
		padding: 34upx 2.5% 20upx 2.5%;
		display: flex;
		justify-content:space-between;
		font-size: 32upx;
		color: #333;
		navigator{
			font-size: 28upx;
		}
	}
	
	.content{
		padding-top: 96upx;
	}
	
	
	/* 商品列表 */
	.goods-list{
		display:flex;
		flex-wrap:wrap;
		padding: 0 30upx;
		background: #E9E9E9;
		.goods-item{
			display:flex;
			flex-direction: column;
			width: 23%;
			padding-bottom: 10upx;
			box-shadow:0px 0px 15px 0px rgba(0, 0, 0, 0.08);
			margin-top: 25upx;
			background: #fff;
			margin-right: 2.6%;
			&:nth-child(4n){
				margin-right: 0%;
			}
		}
		.image-wrapper{
			width: 80%;
			margin: 15upx auto;
			height: 90upx;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}
		.title{
			font-size: 28upx;
			color: #444444;
			line-height: 80upx;
			padding: 0 12upx;
			text-align: center;
		}
		
	}
</style>
